<template>
  <div class="docIndex">
    <el-row type="flex" class="row-bg">
      <!-- 左侧 -->
      <el-col :span="4" class="left_m" style="background-color: white; font-size: 16px; overflow: auto" :style="heightY">
        <!-- 菜单或者标签 -->
        <el-menu default-active="-1" class="el-menu-vertical-demo">
          <el-menu-item index="-1">
            <span slot="title" @click="handleMenuAllClick">
              全部
            </span>
          </el-menu-item>
          <el-menu-item v-for="(item, index) in items" :key="index" :index="item.index" :default-active="false">
            <span slot="title" @click="handleMenuItemClick(item)">
              {{ item.label }}
            </span>
          </el-menu-item>
        </el-menu>
      </el-col>

      <!-- 右侧 -->
      <el-col :span="20" style="margin-left: 10px;" :style="heightY2">
        <div class="docIndex_head">
          <el-form label-width="100px" style="display: flex; flex: 1;justify-content: space-between;">
            <div style="display: flex; flex: 1;">
              <el-form-item label="资料标题:">
                <el-input v-model="queryForm.textTitle" placeholder="请输入资料标题" size="small" maxlength="50" />
              </el-form-item>
              <el-form-item label="资料标签:">
                <el-select v-model="queryForm.textLabel" placeholder="请选择" multiple clearable size="small">
                  <el-option v-for="item in textLabelList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label-width="20px" style="margin-left: 0; margin-right: 0;">
                <el-button size="small" @click="rest">
                  重 置
                </el-button>
                <el-button type="primary" size="small" @click="getTextList">
                  查 询
                </el-button>
              </el-form-item>
            </div>
            <el-form-item style="margin-left: 0; margin-right: 0;">
              <el-button type="primary" size="small" plain @click="refresh">
                刷新
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="docIndex_table">
          <!-- 头部 -->
          <div class="docIndex_table_top">
            <el-tag v-for="(item, index) in items" style="font-size: 16px;margin:0 10px;cursor: pointer;"
              @click="changeColor(index)" :key="index" :effect="item.tagEffect">
              {{ item.label }}
            </el-tag>
          </div>
          <el-main class="main_table" ref="container">
            <el-row class="row-con">
              <el-col :span="5" v-for="(item, index) in tableData" :key="index">
                <el-card class="card" :body-style="{ padding: '0px' }" shadow="hover">
                  <img :src="item.textThumbnail" @click="handleDetailImg(item)" class="image">
                  <div style="padding: 14px;">
                    <h2>{{ item.textTitle }}</h2>
                      <p>标签:{{ item.textLabel }}</p>
                      <p>简介:{{ item.description }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
          <div class="bot_pagination">
            <vxe-pager background @page-change="handleCurrentChange" :current-page.sync="page.currentPage"
              :page-size.sync="page.pageSize" :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total',
              ]" :total="page.totalPage" />
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 视频 -->
    <detailVideo ref="detailVideoRef" v-if="showDetailVideo" />
  </div>
</template>
<script>
import { getList } from "@/api/knowledge/label";
import { helpTextList } from "@/api/knowledge/helpText";
import detailVideo from "./detailVideo.vue";
import store from "@/store";
export default ({
  name: `video`,
  components: { detailVideo },
  data() {
    return {
      textLabelList: [],
      items: [],
      tableData: [],
      showDetailVideo: false,
      heightY: { height: `${window.innerHeight - 120}px` },
      heightY2: { height: `${window.innerHeight - 190}px` },
      page: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
      },
      queryForm: {
        textTitle: ``,
        textLabel: [],
      },
      searchkeys: [],
      selectedItem: ``,
      fileBusinessTypeId: "111",
      textBussinessTypeCode: "111"
    }
  },
  created() {
    this.getTagDataList();
    this.getTextList();
    this.showDetailVideo = true;
  },
  methods: {
    handleMenuItemClick(item) {
      this.selectedItem = item.label;
      this.getTextList(this.selectedTab, this.selectedItem);
    },
    handleCurrentChange({ currentPage, pageSize }) {
      //选择跳转多少页
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.getTextList();
    },
    // 获取数据
    getTextList() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        userName: store.getters.userName.toString(),
        data: {
          textBussinessTypeCode: this.textBussinessTypeCode,
          pageSize: this.page.pageSize,
          currentPage: this.page.currentPage,
          textTitle: this.queryForm.textTitle,
        },
      };
      if (this.queryForm.textLabel.length || this.searchkeys.length || this.selectedItem.length) {
        params.data.textLabel =
          this.queryForm.textLabel.join(`,`) || this.searchkeys.join(`,`) || this.selectedItem
      }
      if (params.data.textLabel || params.data.textTitle) {
        this.page.pageSize = 20;
        this.page.currentPage = 1;
      }
      helpTextList(params).then((data) => {
        if (data.result) {
          this.tableData = data.resultdata.data;
          this.image = data.resultdata.data.textThumbnail
          this.page.totalPage = data.resultdata.count;
        }
      });
    },
    handleMenuAllClick() {
      this.queryForm.textTitle = ``;
      this.queryForm.textLabel = [];
      this.searchkeys = [];
      this.selectedItem = ``;
      this.getTextList();
    },
    // 获取标签
    getTagDataList() {
      const params = {
        data: { fileBusinessTypeId: this.fileBusinessTypeId },
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        userName: store.getters.userName.toString(),
      };
      getList(params).then((data) => {
        if (data.result) {
          const items = [];
          data.resultdata.data.forEach(function (obj, index) {
            items.push({
              label: obj.labelName,
              index: index.toString(),
              value: obj.labelName,
              tagEffect: `plain`,
            });
          });

          this.textLabelList = items;
          this.items = items;
        }
      });
    },
    changeColor(id) {
      // 点击改变主题
      const baginState = this.items[id].tagEffect == `plain`;
      this.items[id].tagEffect =
        this.items[id].tagEffect == `plain` ? `dark` : `plain`;
      this.searchkeys = [];
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].tagEffect == `dark`) {
          this.searchkeys.push(this.items[i].label);
        }
      }
      this.getTextList(this.selectedTab, this.searchkeys.join(`,`));
    },
    handleDetailImg(row) {
      this.showDetailVideo = true;
      this.$nextTick(() => {
        this.$refs.detailVideoRef.init(row);
      })
    },
    refresh() {
      this.$nextTick(() => {
        this.tableData = [];
      })
      this.getTextList();
    },
    rest() {
      this.queryForm.textTitle = ``;
      this.queryForm.textLabel = [];
    },
  },
})
</script>

<style scoped lang="scss">
* {
  scrollbar-width: thin;
  scrollbar-color: #333 transparentize;
}

.external-frame .external-frame-content .router-view {
  padding: 10px !important;
  background: #eee !important;
}

.docIndex {
  height: calc(100% - 125px);
  background: #eee;

  &_head {
    height: 60px;
    background: #ffffff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box !important;

    .form_item {
      flex: 1;
      margin-right: 10px;

      &_title {
        font-size: 14px;
        color: #000000;
        line-height: 24px;
        margin-bottom: 8px;
      }

      &_number {
        display: flex;
        width: 220px;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #000000;
        line-height: 22px;

        >.el-input-number {
          width: 100px;

          .el-input--small {
            .el-input__inner {
              padding: unset;
              padding-left: 10px;
            }
          }
        }
      }

      .el-date-editor {
        width: 260px;
      }
    }

    .form_button {
      margin-right: 8px;

      &_title {
        height: 24px;
        margin-bottom: 8px;
      }
    }
  }

  &_table {
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
    height: 100%;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 0 24px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 24px;

    &_top {
      height: 40px;
      display: flex;
      align-items: center;
    }

    .table_operate {
      display: flex;
      justify-content: space-around;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #579ef8;
      line-height: 22px;
      //width: 125px;

      .edit {
        cursor: pointer;
      }

      .del {
        color: #f85757;
        cursor: pointer;
      }
    }

    .bot_pagination {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 40px;
    }
  }
}
.row-con{
  display: flex;
  flex-flow: row wrap;
}
.row-con .card{
  height: 100%;
}
.image {
    width: 100%;
    height: 172px;
    display: block;
}
.main_table {
  height: calc(100vh - 124px - 112px - 34px - 20px);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #333 transparentize;

  // // background:#eee;
  // .docIndex_table_dl {
  //   cursor: pointer;
  //   float: left;
  //   margin-left: 40px;

  //   dt {
  //     float: left;
  //   }
  // }

  .el-table {
    >.el-table__body-wrapper {
      scrollbar-width: thin;
      scrollbar-color: #333 transparentize;
    }

    .docIcon {
      vertical-align: middle;
      width: 48px;
      height: 48px;
    }
  }
}

.el-form {
  // display: flex !important;
  margin-top: 20px;
}

.docIndex_head {
  height: 60px;
}
</style>
<style  scoped>
.search_cascader .el-checkbox__inner {
  border: 2px solid #999 !important;
}

.el-table thead {
  background: linear-gradient(180deg, #fff, #ededed);
}

.el-tabs .is-active {
  background: #dddddd !important;
}

>>>.el-menu-item span {
  display: block;
  text-align: center;
  font-size: 18px;
}
>>>.el-col-5{
  margin-left: 35px;
  padding: 10px;
}
</style>
